<template>
	<view class="container">
		<white-curbar bgColor="255,255,255" :isBack="true" fontColor='51,51,51' :opacity="opacity" :iconOpcity="iconOpcity">
			<block slot="content" class="text-cut ">{{navTitle}}</block>
		</white-curbar>
		<view class="header-background" :style="'background-image:linear-gradient(-30deg, '+gradient.start+','+ gradient.end+');background-image:-o-linear-gradient(-30deg, '+gradient.start+','+ gradient.end+');background-image:-webkit-gradient(linear, left top, right bottom, from('+gradient.start+'),to('+gradient.end+'))'">
			<image :src="defaultLogo+'?x-oss-process=image/resize,m_fill,h_200,w_200'" mode=""></image>
			<view class="">
				<text>{{affiliateName}}</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Edit-data.png" mode="" @click="goChainSet"
				 v-if="flag=='true'"></image>
			</view>
			<view class="">
				<text></text>
				<text>掌商平台为您臻选</text>
				<text></text>
			</view>
			<view class="text-cut">
				{{slogan}}
			</view>
			<view class="use-bbton" v-if="flag=='true'">
				<text @click="adminUse">{{adminStatus?'完成':'管理商铺'}}</text>
			</view>
		</view>
		<view class="affiliate-cont" :style="contStyle">
			<view class="first-item" v-if="shopInfo.template==2" v-for="(item,index) in shopList" :key="index">
				<view class="one">
					<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_200,w_240'" mode=""></image>
					<view class="f-con">
						<view class="text-cut">
							{{item.name}}
						</view>
						<view class="address">
							<view class="">
								<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
								<view class="text-cut">
									{{item.address}}
								</view>
							</view>
							<view>
								{{item.distance}}
							</view>
						</view>
						<view class="tags">
							<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
						</view>
						<view class="text-cut" v-if="item.summary">
							{{item.summary}}
						</view>
					</view>
				</view>
				<view class="two">
					<view class="">
						<view class="">
							<image :src="img" mode="" v-for="(img,k) in item.user_list" :key="k"></image>
						</view>
						<view class="">
							{{item.visit_number}}人已逛店
						</view>
					</view>
					<view class="" @click="navUrl" :data-id="item.id">
						立即逛店
					</view>
				</view>
				<view class="posit" v-if="index<3">
					<text>NO</text>
					<text>{{index+1}}</text>
				</view>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden.png" v-if="index==0" mode="" class="h_g"></image>
				<view class="is_truth use-bbtn" v-if="index>0 && adminStatus" :class="allTruth || item.isTruth?'be_truth':''"
				 @tap.stop="selectThis(item.id)"></view>
			</view>
			<view class="seconed-item" v-if="shopInfo.template==1" v-for="(item,index) in shopList" :key="index" @click="navUrl"
			 :data-id="item.id">
				<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_300,w_750'" mode=""></image>
				<view class="se-cont">
					<view>
						<text class="text-cut">{{item.name}}</text>
						<text v-if="item.consume_number>0">月售{{item.consume_number}}</text>
					</view>
					<view class="tagss">
						<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
					</view>
					<view class="summary" v-if="item.summary">
						<text>“</text>
						<text class="text-cut">{{item.summary}}</text>
						<text>”</text>
					</view>
					<view class="address">
						<view class="">
							<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
							<view class="text-cut">
								{{item.address}}
							</view>
						</view>
						<view>
							{{item.distance}}
						</view>
					</view>
				</view>
				<view class="position-label" v-if="index<3">
					TOP{{index+1}}
				</view>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden.png" v-if="index==0" mode="" class="h_g"></image>
				<view class="is_truth use-bbtn" v-if="adminStatus && index>0" :class="allTruth || item.isTruth?'be_truth':''"
				 @tap.stop="selectThis(item.id)"></view>
			</view>
		</view>
		<!-- 管理浮层 -->
		<view class="bottom-use-btn" :style="[{bottom: adminStatus?'0':'-106rpx'}]">
			<view class="left" @click="checkAll">
				<view class="is_truth" :class="allTruth?'be_truth':''"></view>
				<text class="">全选</text>
			</view>
			<view class="right">
				<text @click="deleteALL">踢出</text>
			</view>
		</view>
	</view>
</template>

<script>
	import whiteCurbar from './component/whiteCurbar.vue'
	import tuiIcon from "@/components/thorUI/icon.vue";
	export default {
		components: {
			whiteCurbar,
			tuiIcon
		},
		data() {
			return {
				opacity: 0,
				iconOpcity: 0.5,
				navTitle: '联盟名称',
				scrollH: 0,
				gradient: {
					start: '#de3337',
					end: '#9b1012'
				},
				defaultLogo: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Original-logo.png',
				slogan: 'slogan',
				affiliateName: '掌商联盟',
				contHeight: 0,
				types: 1,
				contStyle: '',
				adminStatus: false,
				allTruth: false,
				coordinate: {},
				shopList: [],
				shopInfo: {},
				chainId: '',
				flag: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		methods: {
			deleteALL() {
				var that = this
				var shopList = this.shopList
				var filter = shopList.filter(item => item.isTruth == true)
				if (filter.length == 0) {
					uni.showToast({
						title: '请选择需要踢出的商家',
						icon: 'none'
					})
					return
				}
				var params = []
				filter.forEach(item => {
					params.push(item.id)
				})
				this.$request({
					url: '/ChainShop/remove_business',
					data: {
						business_id: params.join(',')
					},
					success: res => {
						if (res.data.status == 1) {
							var newList = []
							shopList.forEach(item => {
								if (params.indexOf(item.id) == -1) {
									newList.push(item)
								}
							})
							that.shopList = newList
							that.adminUse()
							uni.showModal({
								content: '操作成功',
								showCancel: false
							});
						}
					},
					fail: () => {},
					complete: () => {}
				})

			},
			navUrl(e) {
				var id = e.currentTarget.dataset.id
				if (id) {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
			goChainSet() {
				uni.navigateTo({
					url: '/pages/affiliateSet?chainId=' + this.chainId
				})
			},
			// 管理商品
			adminUse() {
				var that = this
				that.adminStatus = !that.adminStatus
			},
			selectThis(id) {
				var shopList = this.shopList
				shopList.forEach(item => {
					if (item.id == id) {
						item.isTruth = !item.isTruth
					}
				})
				var filter = shopList.filter(item => item.isTruth == false)
				if (filter.length == 1) {
					this.allTruth = true
				} else {
					this.allTruth = false
				}
				this.shopList = shopList
			},
			// 全选
			checkAll() {
				var that = this
				that.allTruth = !that.allTruth
				var productList = this.shopList
				productList.forEach((item, index) => {
					if (index > 0) {
						item.isTruth = that.allTruth
					}
				})
			},
			getInfo() {
				var that = this
				this.$request({
					url: '/ChainShop/get_info',
					data: {
						id: that.chainId
					},
					success: res => {
						if (res.data.status == 1) {
							res.data.data.template = res.data.data.template == 0 ? 1 : res.data.data.template
							var thisData = res.data.data
							that.shopInfo = thisData
							that.navTitle = thisData.name
							that.defaultLogo = thisData.image_url
							that.slogan = thisData.summary
							that.affiliateName = thisData.name

							if (thisData.color && thisData.template) {
								that.getData(thisData.color, thisData.template)
							} else {
								var style = ''
								style = `background:#f5f5f5;min-height:${this.contHeight}px;padding-top:40rpx`
								that.contStyle = style
							}

						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getData(colorId, tempId) {
				var that = this
				this.$request({
					url: '/ChainShop/get_color_logo',
					success: res => {
						if (res.data.status == 1) {
							var bottomColor = res.data.data.color.filter(item => item.id == colorId)
							var style = ''
							var gradient = that.gradient
							gradient.start = bottomColor[0].start_1
							gradient.end = bottomColor[0].end_1
							if (tempId == 2) {
								style =
									`background-image:linear-gradient(to right,${bottomColor[0].start_2},${bottomColor[0].end_2});background-image:-o-linear-gradient(to right,${bottomColor[0].start_2},${bottomColor[0].end_2});background-image:-webkit-gradient(linear, left top, right top, from(${bottomColor[0].start_2}),to(${bottomColor[0].end_2}));min-height:${this.contHeight}px`
							} else {
								style = `background:#f5f5f5;min-height:${this.contHeight}px;padding-top:40rpx`
							}
							that.contStyle = style
							that.gradient = gradient
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getChainShopsData() {
				var that = this;
				this.$request({
					url: '/Shop/getChainShopOrderNew',
					data: {
						chain_shop_id: that.chainId,
						latitude: that.coordinate.latitude,
						longitude: that.coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							list.forEach(item => {
								item['isTruth'] = false
							})
							that.shopList = list
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
		onLoad(options) {
			// options.chainId = 1
			// options.flag = true
			this.chainId = options.chainId
			this.flag = options.flag

			this.coordinate = uni.getStorageSync('coordinate')
			this.getChainShopsData()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
					this.contHeight = res.windowHeight - 230
				}
			})
		},
		onShow() {
			this.getInfo()
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / (this.scrollH / 4);
			if (this.opacity >= 1 && opcity >= 1) {
				return;
			}
			this.opacity = Number(opcity).toFixed(2);
			var thisOpcity = this.opacity < 0 ? 0 : 1
			this.iconOpcity = 0.5 * (thisOpcity - this.opacity)

			if (this.iconOpcity == 0.5) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000'
				})
			} else {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				})
			}
		},
		computed: {

		}
	}
</script>

<style scoped>
	.header-background {
		width: 100%;
		height: 570rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 130rpx;
		box-sizing: border-box;
		position: relative;
	}

	.use-bbton {
		position: absolute;
		top: 150rpx;
		right: 24rpx;
	}

	.use-bbton text {
		font-size: 30rpx;
		color: #fff;
	}

	.header-background image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
	}

	.header-background>view:nth-child(2) {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		position: relative;
	}

	.header-background>view:nth-child(2) image {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		bottom: 2rpx;
		right: -55rpx;
	}

	.header-background>view:nth-child(2) text {
		font-size: 48rpx;
		letter-spacing: 3rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.header-background>view:nth-child(3) {
		display: flex;
		align-items: center;
		margin-top: 20rpx
	}

	.header-background>view:nth-child(3)>text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.header-background>view:nth-child(3)>text:nth-child(1),
	.header-background>view:nth-child(3)>text:nth-child(3) {
		display: inline-block;
		width: 48rpx;
		height: 1rpx;
		background-color: #ffffff;

	}

	.header-background>view:nth-child(3)>text:nth-child(2) {
		margin: 0 20rpx;
	}

	.header-background>view:nth-child(4) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
		margin-top: 30rpx;
	}

	.affiliate-cont {
		width: 100%;
		padding: 0 24rpx 106rpx;
		box-sizing: border-box;
	}

	.first-item {
		width: 100%;
		border-radius: 8rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
	}

	.first-item .h_g {
		position: absolute;
		top: -30rpx;
		right: -20rpx;
		width: 70rpx;
		height: 70rpx;
		transform: rotate(30deg);
	}

	.first-item .one {
		padding: 20rpx 0;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		border-bottom: solid 1rpx #efefef;
	}

	.first-item .posit {
		position: absolute;
		top: 18rpx;
		left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40rpx;
		height: 56rpx;
		/* box-shadow: 1rpx 4rpx 8rpx 0rpx rgba(165, 20, 14, 0.5); */
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-rank-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.first-item .posit>text:nth-child(1) {
		font-size: 20rpx;
		color: #ffffff;
	}

	.first-item .posit>text:nth-child(2) {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.first-item .one image {
		width: 240rpx;
		height: 200rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.first-item .one .f-con {
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.first-item .one .f-con>view:nth-child(1) {
		max-width: 360rpx;
		font-size: 36rpx;
		letter-spacing: 2rpx;
		color: #333333;
	}

	.first-item .one .f-con .address {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.first-item .one .f-con .address>view:nth-child(1) {
		flex: 1;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.first-item .one .f-con .address>view:nth-child(1)>view:nth-child(2) {

		margin-left: 10rpx;
		max-width: 220rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.first-item .one .f-con .address>view:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		align-self: flex-end;
		float: right;
	}

	.first-item .one .f-con .tags {
		display: flex;
		align-items: center;
	}

	.first-item .one .f-con .tags text {
		display: inline-block;
		padding: 0 15rpx;
		line-height: 35rpx;
		margin-right: 10rpx;
		color: #f34930;
		letter-spacing: 1rpx;
		background: #fff;
		border: solid 1rpx #f34930;
		border-radius: 4rpx;
		font-size: 24rpx;
	}

	.first-item .one .f-con .tags text:nth-child(1) {
		background: #f34930;
		color: #fff;
	}

	.first-item .one .f-con>view:nth-child(4) {
		max-width: 360rpx;
		letter-spacing: 1rpx;
		color: #f34930;
		font-size: 24rpx;
	}

	.first-item .two {
		width: 100%;
		padding: 25rpx 0;
		display: flex;
		align-items: center;
	}

	.first-item .two>view:nth-child(1) {
		flex: 1;
		height: 56rpx;
		display: flex;
		align-items: center;
	}

	.first-item .two>view:nth-child(1)>view:nth-child(1) {
		margin-right: 20rpx;
	}

	.first-item .two>view:nth-child(1)>view:nth-child(1) image {
		width: 48rpx;
		height: 48rpx;
		border-radius: 100%;
		margin-left: -20rpx;
	}

	.first-item .two>view:nth-child(1)>view:nth-child(1) image:nth-child(1) {
		margin-left: 0 !important;
	}

	.first-item .two>view:nth-child(1)>view:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.first-item .two>view:nth-child(2) {
		width: 173rpx;
		height: 56rpx;
		background-color: #f34930;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}


	.seconed-item {
		width: 100%;
		border-radius: 8rpx;
		padding: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}

	.seconed-item .h_g {
		position: absolute;
		top: -30rpx;
		right: -20rpx;
		width: 70rpx;
		height: 70rpx;
		transform: rotate(30deg);
	}

	.seconed-item .position-label {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		width: 80rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, .5);
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
		line-height: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.seconed-item image {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
	}

	.seconed-item .se-cont>view:nth-child(1) {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: space-between;
	}

	.seconed-item .se-cont>view:nth-child(1)>text:nth-child(1) {
		font-size: 36rpx;
		letter-spacing: 2rpx;
		color: #333333;
		max-width: 500rpx;
		display: inline-block;
		font-weight: bold;
	}

	.seconed-item .se-cont>view:nth-child(1)>text:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		display: inline-block;
	}

	.seconed-item .se-cont .taggs {
		display: flex;
		align-items: center;
	}

	.seconed-item .se-cont .tagss text {
		display: inline-block;
		padding: 0 15rpx;
		line-height: 40rpx;
		margin-right: 10rpx;
		color: #f34930;
		letter-spacing: 1rpx;
		background: #fff;
		border: solid 1rpx #f34930;
		border-radius: 4rpx;
		font-size: 24rpx;
	}

	.seconed-item .se-cont .tagss text:nth-child(1) {
		background: #f34930;
		color: #fff;
	}

	.seconed-item .se-cont .summary {
		width: 100%;
		height: 40rpx;
		background: rgba(243, 73, 48, 0.1);
		display: flex;
		align-items: center;
		margin: 10rpx 0 0 0;
		padding: 0 15rpx;
	}

	.seconed-item .se-cont .summary text:nth-child(1),
	.seconed-item .se-cont .summary text:nth-child(3) {
		color: #f34930;
		font-size: 36rpx;
	}

	.seconed-item .se-cont .summary text:nth-child(2) {
		flex: 1;
		max-width: 590rpx;
		color: #666666;
		font-size: 24rpx;
		margin: 0 10rpx
	}

	.seconed-item .se-cont .address {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		margin-top: 20rpx
	}

	.seconed-item .se-cont .address>view:nth-child(1) {
		flex: 1;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.seconed-item .se-cont .address>view:nth-child(1)>view:nth-child(2) {
		margin-left: 10rpx;
		max-width: 500rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.seconed-item .se-cont .address>view:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		align-self: flex-end;
		float: right;
	}

	/* 管理 */


	.bottom-use-btn {
		width: 100%;
		height: 106rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		transition: all 0.5s;
		background: #fff;
		z-index: 9;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-top: solid 1rpx #efefef;
		bottom: -106rpx;
	}

	.bottom-use-btn .left {
		display: flex;
		align-items: center;
	}

	.bottom-use-btn .left .is_truth {
		margin-right: 10rpx;
	}

	.bottom-use-btn .left text {
		letter-spacing: 1rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.bottom-use-btn .right {
		display: flex;
		align-items: center;
	}

	.bottom-use-btn .right text {
		display: block;
		width: 120rpx;
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 36rpx;
		border: solid 1rpx #efefef;
		text-align: center;
		line-height: 60rpx;
		color: #999999;
	}

	.bottom-use-btn .right text:nth-child(1) {
		margin-right: 20rpx;
	}

	.bottom-use-btn .right text:nth-child(2) {
		margin-right: 20rpx;
		border: solid 1rpx #f34930;
		color: #f34930;
	}

	.use-bbtn {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: -22rpx;
		left: -18rpx
	}
</style>
<style>
	.is_truth {
		width: 36rpx;
		height: 36rpx;
		background-color: #ffffff;
		border: solid 1rpx #efefef;
		border-radius: 100% !important;
	}

	.is_truth.be_truth {
		border: none;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/red-choose.png'), #fff no-repeat;
		background-size: 100% 100%;
	}
</style>
